/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-09 15:16:00
 * @LastEditTime : 2023-06-13 19:05:26
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\BeamProduce.jsx
 * @Description  :
 */
import './Scss/BeamProduce.scss'
import { useRequest, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'
import dayjs from 'dayjs'

export const BeamProduce001 = ({ uuid }) => {
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Title, setTitle] = useState()
    const [Parameter, setParameter] = useState()
    const [UUID, setUUID] = useState()
    useEffect(() => {
        setUUID(uuid)
    }, [uuid])

    const { run: geyMixPlatProductivity } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { dateProductivity, monthProductivity, yearProductivity } = res
            setDataOne([
                { uuid: '1', title: '年出料量', number: yearProductivity, unit: 'm³' },
                { uuid: '2', title: '月出料量', number: monthProductivity, unit: 'm³' },
                { uuid: '3', title: '日出料量', number: dateProductivity, unit: 'm³' },
            ])
        },
    })

    const { run: geyConstructionBeamProductivity } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { dayProductivity, daysLeft, yearProductivity } = res
            setDataTwo([
                {
                    uuid: '1',
                    title: '年生产能力',
                    number: yearProductivity,
                    unit: '片',
                    click: { title: '梁片年生产能力 (统计)', value: 'SecondaryGetBeamProduceSum' },
                },
                {
                    uuid: '2',
                    title: '日生产能力',
                    number: dayProductivity,
                    unit: '片',
                    click: { title: '梁片年生产明细 (明细)', value: 'SecondaryGetBeamProduceRecords' },
                },
                { uuid: '3', title: '剩余所需时间', number: daysLeft, unit: '日' },
            ])
        },
    })
    useEffect(() => {
        geyConstructionBeamProductivity({ url: `getConstructionBeamProductivity`, data: { organizationUuid: uuid } })
        geyMixPlatProductivity({
            url: `getMixPlatProductivity`,
            data: {
                organizationUuid: uuid,
                year: dayjs().format('YYYY'),
                month: dayjs().format('MM'),
                day: dayjs().format('DD'),
            },
        })
    }, [geyConstructionBeamProductivity, geyMixPlatProductivity, uuid])

    const [DataOne, setDataOne] = useState([])
    const [DataTwo, setDataTwo] = useState([])
    return (
        <div className="BeamProduce001">
            <div>
                <div className="TitleSmall">
                    <div>拌合站出料量</div>
                    <div />
                </div>
                <div
                    onClick={() => {
                        setTitle('拌合站出料明细')
                        setParameter({
                            uuid: uuid,
                            type: 'LargeScreeTable',
                            classification: 'SecondaryCementMixPlat',
                        })
                        setTrue()
                    }}
                >
                    {DataOne &&
                        DataOne.map(({ uuid, title, number, unit }) => (
                            <div key={uuid}>
                                <div style={{ color: '#94FFFF' }}>{title}</div>
                                <div>
                                    <div>{number}</div>
                                    <div>{unit}</div>
                                </div>
                            </div>
                        ))}
                </div>
            </div>
            <div>
                <div className="TitleSmall">
                    <div>粱片生产力</div>
                    <div />
                </div>
                <div>
                    {DataTwo.map(({ uuid, title, number, unit, click }) => (
                        <div
                            key={uuid}
                            onClick={() => {
                                if (click) {
                                    setTitle(click.title)
                                    setParameter({
                                        uuid: UUID,
                                        type: 'LargeScreeTable',
                                        classification: click.value,
                                    })
                                    setTrue()
                                }
                            }}
                        >
                            <div style={{ color: '#FFF494' }}>{title}</div>
                            <div>
                                <div>{number}</div>
                                <div>{unit}</div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
